<template lang="html">
  <div class="">
    <div class="btn">
      <el-button type="primary" @click="back">返回上级</el-button>
    </div>
    <tableVue :list="list" :state="false">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="handleEdit(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="pcot" @close="changeData" :state="false">
        <slot>
            <el-form :model="pcotData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="选项名称">
                    <el-input v-model="pcotData.optionName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="是否允许别名">
                   <el-select v-model="pcotData.isAlias" placeholder="请选择">
                       <el-option value="">请选择</el-option>
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                       </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary" @click="addForm(null,'put')">提交</el-button>
                  </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
  </div>
</template>

<script>
  import Data from './optionData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    getAllPcot,
    Addpcot,
    delPcot
  } from "@/api/product/product";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
        this.getOption();

    },
    methods : {
      getOption () {
        var id = JSON.parse(this.$route.query.item)
        getAllPcot(id).then(res=>{
          if (res.data.code == 'OK') {
            this.list.tbody = res.data.data.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               item.isAlias = item.isAlias == 'Y' ? '是' : '否'
               return item;
            });
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      handleEdit (item,num) {
        if (num == 1) {
          this.pcot = true;
          this.pcotData.optionName = item.optionName;
          this.pcotData.isAlias = item.isAlias;
          this.pcotData.conditionTplId = item.conditionTplId;
          this.pcotData.conditionOptionTplId = item.conditionOptionTplId;
        } else {
          this.delMessage(()=>{
              delPcot (item.conditionOptionTplId).then(res=>{
                if (res.data.code == 'OK') {
                    this.$message.success('删除成功');
                      this.getOption();
                } else {
                  this.$message.error(res.data.message);
                }
              })
          })
        }
      },
      addForm (ids,method) {
        let data = {
          optionName : this.pcotData.optionName,
          isAlias : this.pcotData.isAlias,
          conditionTplId : this.pcotData.conditionTplId,
          conditionOptionTplId : this.pcotData.conditionOptionTplId
        }
        Addpcot (data,method).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('编辑成功');
            this.getOption();
              this.pcot = false;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      changeData (val) {
        this.pcot = val;
      },
      back () {
        this.$router.push({
          name : 'productEst'
        })
      }
    }
}
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.btn {
  margin-top: 10px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
